@import "~@/mixin.less";

.normal {
  background-color: #333333;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
}

.metro {
  width: 500px;
  margin: 0 auto;

  .item {
    padding: 5px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    color: rgba(255, 255, 255, 0.86);
    font-size: 18px;
    text-align: left;
    text-transform: uppercase;
    transition: 0.4s;
    position: relative;
    &:hover {
      transform: scale(0.9);
      &:after {
        box-shadow: inset 0 0 0 2px rgba(234, 184, 57, 0.51);
      }
    }

    &:after {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      transition: all .3s ease;
      box-shadow: inset 0 0 0 2px hsla(0, 0%, 40%, .4);
    }

    .icon {
      opacity: .8;
      padding: 20px;
      font-size: 42px;
    }
  }

  .item1 {
    background-color: #4891D3;
  }

  .item2 {
    background-color: #E56549;
  }

  .item3 {
    background-color: #55B378;
  }

  .item4 {
    background-color: #35485D;
  }

  .item5 {
    background-color: #9769B1;
  }
}